<ion-header>
  <ion-navbar>
    <ion-title>Credit Card Scan</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <p>NOTE: THIS ONLY WORKS ON MOBILE!</p>
  <div>
    <img [src]="cardImage" />
    <ion-fab right class="pop-in" [ngClass]="{'pop-out': fabGone}" style="top: 23rem;">
      <button ion-fab mini (click)="scanCard()" color="dark"><ion-icon name="camera"></ion-icon></button>
    </ion-fab>
  </div>
  <div>
    <ion-item>
      <ion-label>Card Type</ion-label>
      <ion-input type="text" [(ngModel)]="card.cardType"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Card Number</ion-label>
      <ion-input type="text" [(ngModel)]="card.cardNumber"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Expiry Month</ion-label>
      <ion-input type="text" [(ngModel)]="card.expiryMonth"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Expiry Year</ion-label>
      <ion-input type="text" [(ngModel)]="card.expiryYear"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>CVV</ion-label>
      <ion-input type="text" [(ngModel)]="card.cvv"></ion-input>
    </ion-item>
  </div>
</ion-content>

